<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue初体验</title>
</head>

<body>

  <div id="app">
    <h4>{{ message }}</h4>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    // 1. 原始js写法 编程范式: (命令式编程)
    /*  
      1) 创建div元素，设置id属性;
      2) 定义变量;
      3) 将变量放入元素中进行展示。 
    */

    // 2. 创建一个Vue实例 编程范式: (声明式编程)
    const app = new Vue({
      // 挂载div元素，进行管理
      el: '#app',

      // 定义数据
      data: {
        message: 'hello, my name is chen!'
      }
    })

    // 好处: 数据与界面代码分离，界面就写界面，逻辑就写逻辑，vue是响应式的，当数据进行改变，界面展示也会跟着改变。
  </script>
</body>

</html>